<!-- 角色管理 -->
<template>
    <div>
        <div class="header">
            角色管理
        </div>
        <div class="top" style=" padding:0 25px">
            <el-button type="primary" style="width:100px;" @click="dialogVisible = true">添加</el-button>
        </div>
        <!-- 列表 -->
        <div style="padding: 20px; width: 1000px;">
            <Table :tableCols="tableCols" :tableData="tableDate" :selection="selection" :total="total"
                @pagechange="pagechange">
                <template #option="{row}">
                    <el-button type="success" @click="handleClick(row)">修改</el-button>
                    <el-button type="danger" @click="del(row.id)">删除</el-button>
                </template>
            </Table>
        </div>
        <!-- 详情 -->
        <div>   
            <Add :dialogVisible="dialogVisible" @isclose="isclose" :handleClickdata="handleClickdata"></Add>
        </div>
    </div>
</template>

<script>
import Table from '@/components/Table/Table.vue'
import Add from '@/components/add/addrole.vue'
import { role } from "@/api/administratorrole"
export default {
    components: {
        Table,
        Add
    },
    data() {
        return {
            dialogVisible: false,
            tableCols: [
                {
                    prop: "id",
                    lable: "ID"
                },
                {
                    prop: "name",
                    lable: "名称"
                },
                {
                    lable: "操作",
                    coltype: "option",
                    slotname: 'option'
                },


            ],
            tableDate: [],
            selection: true,
            query: {
                page: 1,
                psize: 5,
            },
            total: 0,
            handleClickdata:{}
        }
    },
    created() {
        this.getrole()
    },
    methods: {
        pagechange(pageconfig) {
            this.query = pageconfig
            this.getrole()
        },
        async getrole() {
            let res = await role(this.query)
            if (res.errCode == 10000) {
                this.tableDate = res.data.list
                this.total = res.data.counts
            }
        },
        isclose(val, isrefresh = false, clear={}) {
            this.dialogVisible = val
            this.form = clear
            if (isrefresh) {
                this.getrole()
            }
        },
        // 修改
        handleClick(val){
            this.handleClickdata = JSON.parse(JSON.stringify(val))
            this.dialogVisible = true
        },
    }
}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    position: relative;
    padding: 0 10px;
    height: 50px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    color: #427ff4;
    font-size: 16px;
}
</style>